<template>
  <div class="app-content">
    <div class="swiper mySwiper">
    <!-- 轮播图组件 -->
      <div class="swiper-wrapper">
        <!-- <div class="swiper-slide">
          <img src="../.././assets/xc-img/banner_01.png" alt="">
        </div> -->
        <div class="swiper-slide" v-for="(item, index) in picList" :key="index">
          <img  :src="item" alt="">
          <div class="title tit1">
            <p>{{titList[index].title}}</p>
            <p>{{titList[index].content}}</p>
          </div>
          <!-- <div class="title tit1" v-if="index === 0">
            <h3>信策科技</h3>
            <h4>信之基石，策之高峰</h4>
          </div>
          <div class="title tit2" v-else-if="index === 1">
            <h3>信策科技</h3>
            <h4>策略铸就未来，信誉开启成功之门</h4>
          </div>
          <div class="title tit3" v-else>
            <h3>信策科技</h3>
            <h4>策略规划，技术创新，开启智能新纪元</h4>
          </div> -->
        </div>
      </div>
      <div class="swiper-pagination"></div>
      <!-- <div class="page">
        <span></span>
        <span></span>
        <span></span>
      </div> -->
    </div>
  </div>
</template>

<script>
import Swiper from 'swiper'
import 'swiper/swiper.min.css'
import banner1 from '@/assets/xc-img/banner_01.png'
import banner2 from '@/assets/xc-img/banner_02.png'
// import banner3 from '@/assets/xc-img/banner_03.jpg'
import banner4 from '@/assets/xc-img/banner_04.png'
export default {
  name: 'LunBo',
  data() {
    return {
      picList: [],
      titList: [
        {title: '信策科技', content: '信之基石，策之高峰'},
        {title: '选择信策', content: '策略铸就未来，信誉开启成功之门'},
        {title: '信策引领', content: '策略规划，技术创新，开启智能新纪元'},
      ]
    }
  },
  mounted() {
    this.picList.push( banner1, banner2, banner4,)
    let mySwiper = new Swiper('.mySwiper', {
        // initialSide: 1,//默认索引为1的图片
        // direction: 'vertical',//滑动方向：vertical垂直， 默认水平
        speed: 600,//滑动速度
        // autoplay: true,//自动切换, 默认停留3秒
        autoplay: {
          // 停留时间
          delay: 3000,
          // disableOnInteraction: false, // 用户操作后是否停止自动播放
        },
        // slidesPerView: 3,
        // spaceBetween: 30,
        // centeredSlides: true,
        loop: true,//循环模式
        // 分页器
        pagination: {
          el: '.swiper-pagination',
          // clickable: true,
        }
    })
    setInterval(function() {
      mySwiper.slideNext();
    }, 4000)
  }
}
</script>

<style lang="scss" scoped>
.app-content {
  .swiper {
    width: 100%;
    height: 100%;
    // overflow: hidden;
  .swiper-wrapper {
    //  width: 500%; /* 滑块总宽度 */
    .swiper-slide {
      // width: 20%; /* 每个滑块宽度 */
      display: flex;
      justify-content: center;
      align-items: center;
      img {
        display: block;
        max-width: 100%;
        height: auto;
        object-fit: cover;
      }
      .title {
        z-index: 999;
        position: absolute;
        top: 30%;
        left: 10%;
        right: 45%;
        text-align: left;
        color: #FFFFFF;
        font-family: Alimama ShuHeiTi;
        p:nth-child(1) {
          font-weight: bold;
          font-size: 60px;
          margin-bottom: 27px;
        }
        p:nth-child(2)  {
          font-size: 22px;
          font-weight: 100;
          margin: 0;
        }
      }
    }
  }
  // 分页不显示??????????
  // .page {
  //   position: absolute;
  //   left: 50%;
  //   bottom: 15px;
  //   transform: translate(-50%, 50%);
  //   span {
  //     display: inline-block;
  //     width: 15px;
  //     height: 15px;
  //     background-color: yellow;
  //     margin-left: 20px;
  //     border-radius: 200px;
  //   }
  // }
}

}

</style>
